import React from 'react'
import { InputItem, Checkbox, Button, List, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import { Link } from 'react-router-dom'
import { actionRegister } from '@/store/user/actions'
import { connect } from 'react-redux'
import './index.scss'

const CheckboxItem = Checkbox.CheckboxItem

class Register extends React.Component {
  state = {
    disabled: false
  }
  render() {
    const { getFieldProps } = this.props.form
    // console.log(getFieldProps('userName'))
    return (
      <div className="page_register">
        
        <div className="register_header">
          <div className="register_header_left">
            <Link to='/home'>
              <i className="iconfont iconshouye" />
            </Link>
          </div>
          <div className="register_header_title">注册</div>
          <span>
            <Link to='/login'>登录</Link>
          </span>
        </div>

        <div className="register_main">
          <List>
            <InputItem
              {...getFieldProps('userName')}
              clear
              placeholder='请输入6-20个字符'
            >用户名</InputItem>
            <InputItem
              clear
              placeholder='请输入6-20位密码'
              {...getFieldProps('password')}
              type='password'
            >设置密码</InputItem>
            <InputItem
              clear
              placeholder='请再次输入密码'
              type='password'
              {...getFieldProps('rePassword')}
            >确认密码</InputItem>
            <InputItem
              clear
              placeholder='请输入常用地址邮箱'
              type='email'
              {...getFieldProps('email')}
            >邮箱</InputItem>
          </List>

          <div className="register_main_center">
            <label>
              <CheckboxItem
                defaultChecked
                onChange={() => {
                  // console.log(e.target.checked)
                  this.setState({
                    disabled: !this.state.disabled
                  })
                }}
              >同意</CheckboxItem>
            </label>

            <span className='register_main_center_span'>
              用户注册协议
            </span>
          </div>
        </div>

        <div className="register_footer">
          <Button
            type='primary'
            style={{ color: '#fff' }}
            disabled={this.state.disabled}
            onClick={() => {
              let userName = getFieldProps('userName').value
              let password = getFieldProps('password').value
              let rePassword = getFieldProps('rePassword').value
              let email = getFieldProps('email').value
              let userInfo = { userName, password, email }

              if (userName && password && rePassword && email) {
                if (userName.length < 3 || userName.length > 16) {
                  return Toast.fail('用户名格式不正确')
                }

                if (password.length < 3 || password.length > 16) {
                  return Toast.fail('密码长度不正确')
                }

                if (password !== rePassword) {
                  return Toast.fail('两次输入密码不一致')
                }

                if (!(/^[\w-]+@[\w-]+\.com$/).test(email)) {
                  return Toast.fail('邮箱格式不正确')
                }

                Toast.fail('注册成功，马上跳转到登录页')
                
                /* 校验通过，将数据写进数据库 */
                this.props.handleRegister(userInfo, this.props)

              } else {
                Toast.fail('表单不能为空')
              }
            }}
          >注册</Button>
        </div>
      </div>
    )
  }
}

Register = createForm()(Register)

export default connect(
  null,
  dispatch => ({
    handleRegister(userInfo, props) {
      // console.log(props)
      dispatch(actionRegister(userInfo, props))
    }
  })
)(Register)
